<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <title>订单列表-搜索</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/order/orderList.css" rel="stylesheet"/>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/vue-common.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/common.js"></script>
    <style>
        input.xlb-input {
            border: none;
            font-size: 1.3rem;
            color: #333;
            background-color: #F3F3F3;
            line-height: 1.4rem;
            height: 3rem;
            border-radius: 3rem;
            width: 90%;
            margin: 0 auto;
            box-sizing: border-box;
            text-align: center;
            padding: 1rem;
        }

        .search-box {
            overflow: hidden;
            height: 3rem;
        }

        .search-box .left {
            float: left;
            width: 80%;
            box-sizing: border-box;
            text-align: right;

        }

        .right-content {
            float: right;
            width: 20%;
            line-height: 3rem;
            font-size: 1.3rem;
            color: #65c459;
        }

        .container.my-box {
            padding-top: 11rem;
            display: flex;
            height: 100%;
        }

        .tab-item .selected {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-radius: .4rem;
            height: .4rem;
            background-color: #65c459;
            opacity: 0.8;
        }

        .tab-box {
            display: flex;
            text-align: center;
            padding: 2rem;
            font-size: 1.3rem;
            justify-content: space-around;
        }

        .tab-item {
            position: relative;
        }

    </style>
</head>
<body>

<div id="app" class="order-container">
    <div class="header-nav" style="height: 12rem;padding-top: 4rem;">
        <div class="search-box">
            <div class="left">
                <input id="search" onkeydown="if(event.keyCode==13){vm.refresh(vm.orderType);}" v-model="atmCode" class="xlb-input"
                       autofocus="autofocus" type="text" placeholder="请输入机具编号查找订单">
            </div>
            <div @click="back" class="right-content">取消</div>
        </div>
        <div class="tab-box">
            <div @click="refresh('dealing')" class="tab-item">
                进行中
                <div v-show="orderType == 'dealing'" class="selected"></div>
            </div>
            <div @click="refresh('history')" class="tab-item">
                历史订单
                <div v-show="orderType == 'history'" class="selected"></div>
            </div>
        </div>
    </div>
    <div class="container my-box">
        <div class="list-box" :class="{'no-data': orderList[orderType].list.length == 0 }">
            <div v-if="(orderList[orderType].list.length == 0)&& searchFlag " class="list-no-data">
                <img src="../../img/common/img_empty@3x.png">
                <p>唉~，没有查找到！</p>
            </div>

            <div v-show="loadingFlag" style="top: 2rem;" class="xlb-loading">
                <img style="width: 2rem" src="../../img/common/loading.gif" alt="">
            </div>

            <div id="scrollId" @scroll="handleScroll" class="list-outer-box">
                <div v-for=" item in orderList[orderType].list" :key="item.id" class="list-item"
                     @click="goDetail(item.id)">
                    <p class="title">
                        <span>订单编号:</span> <span>{{item.orderNo}}</span>
                        <span class="right-icon">{{item.orderStatus| orderStatusFilter }}</span>
                    </p>
                    <p>
                        <span class="label">建单时间:</span> <span class="text">{{ item.beginDate | dataFormat}}</span>
                        <span v-show="item.dateDate||item.limitDate" class="right-icon"><img
                                src="../../img/common/ic_time.jpg"></span>
                    </p>
                    <p>
                        <span class="label">机具编号:</span> <span class="text">{{item.atmCode}}</span>
                    </p>
                    <p>
                        <span class="label">机具型号:</span> <span class="text">{{item.modelCode}}</span>
                    </p>
                    <p>
                        <span class="label">网点名称:</span> <span class="text">{{item.atmInsSide}}</span>
                    </p>
                    <p>
                        <span class="label">故障类型:</span> <span class="text">{{item.startUnType}}</span>
                    </p>
                </div>

                <div style="height: 6rem"></div>
            </div>


        </div>
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        mounted: function () {
            // this.refresh(this.orderType);
        },
        data: {
            title: '首页',
            test: {
                clientHeight: '',
            },
            scrollData: {
                top: 0
            },
            loadingFlag: false,
            skipDown: false,
            orderType: 'dealing',
            atmCode: '', // 搜索条件
            orderList: {
                //进行中的订单
                dealing: {
                    pageParams: {
                        pageSize: 20,
                        pageNo: 1,
                    },
                    list: [],
                    count: 0,
                },
                //历史订单
                history: {
                    pageParams: {
                        pageSize: 20,
                        pageNo: 1,
                    },
                    list: [],
                    count: 0,
                }
            },
            searchFlag: false
        },
        methods: {
            searchInputFocus:function () {
                document.getElementById('search').focus();
            },
            // 跳转新页面
            goDetail: function (id) {
                redirect('pages/order/orderDetail.html?orderId=' + id);
            },
            // 跳转添加订单
            goAddOrder: function () {
                if (this.skipDown) {
                    return;
                }
                redirect('pages/order/orderAddNav.html');
            },
            goSearch: function () {
                redirectByTop('pages/order/searchList.html');
            },
            dealChangeOrderType: function (type) {
                this.orderType = type;
                vm.refresh(type);
            },
            handleScroll: function (e) {

                this.test.clientHeight = document.getElementById('scrollId').clientHeight;
                this.test.offsetHeight = document.getElementById('scrollId').offsetHeight;
                this.test.scrollHeight = document.getElementById('scrollId').scrollHeight;
                this.test.scrollTop = document.getElementById('scrollId').scrollTop;

                var dom = document.getElementById('scrollId');
                var clientHeight = dom.clientHeight;
                var offsetHeight = dom.offsetHeight;
                var scrollHeight = dom.scrollHeight;
                var scrollTop = dom.scrollTop;

                if (this.scrollData.top - scrollTop > 0) {
                    // console.log("向下滑动")
                    //vm.skipDown = false;

                } else if (this.scrollData.top - scrollTop < 0) {
                    // console.log("向上滑动")
                    vm.skipDown = true;
                }
                if (scrollTop == 0) {
                    console.log("刷新页面。。。")
                    vm.skipDown = false;
                    this.loadingFlag = true;
                    setTimeout(function () {
                        vm.loadingFlag = false
                    }, 1000)
                } else if (scrollTop == (scrollHeight - offsetHeight)) {
                    console.log("加载更多。。。。。")
                }

                this.scrollData.top = scrollTop;

            },
            //加载订单列表
            loadOrderList: function (type) {
                this.bottomTitle = '点击加载更多';
                switch (type) {
                    case 'dealing':
                        var params = this.orderList.dealing.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(ORDER_LIST_DAIJIE_API, params, function (res) {
                            vm.searchFlag = true;
                            vm.loadingFlag = false;
                            vm.orderList.dealing.list = res.list;
                            vm.orderList.dealing.count = res.count;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }

                        }, function () {
                            vm.loadingFlag = false;
                        })
                        break;
                    case 'history':
                        var params = this.orderList.history.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(ORDER_LIST_HISTORY_API, params, function (res) {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                            vm.orderList.history.list = res.list;
                            vm.orderList.history.count = res.count;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                        }, function () {
                            vm.loadingFlag = false;
                        })
                        break;
                    default:

                }
            },
            //追加订单
            appendOrderList: function (type) {
                switch (type) {
                    case 'dealing':
                        var params = this.orderList.dealing.pageParams;
                        params.atmCode = this.atmCode;
                        Resource.get(ORDER_LIST_DAIJIE_API, params, function (res) {
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                            vm.orderList.dealing.list = vm.orderList.dealing.list.concat(res.list);
                        })
                        break;
                    case 'history':
                        var params = this.orderList.history.pageParams;
                        params.atmCode = this.atmCode;
                        Resource.get(ORDER_LIST_HISTORY_API, params, function (res) {
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                            vm.orderList.history.list = vm.orderList.history.list.concat(res.list);
                        })
                        break;
                    default:

                }
            },
            //刷新页面
            refresh: function (type) {
                this.searchFlag = false;
                this.orderType = type;
                this.orderList[type].pageParams.pageNo = 1;
                this.loadOrderList(type)
            },
            back: function () {
                mui.back();
            }
        }
    });
    mui.plusReady(function () {

        setTimeout(function () {
            vm.searchInputFocus();
            console.log('--srac--')
        },200)
    })

</script>
<script>

</script>

</body>
</html>